<!--
  * 系统设置表单
  * 
  * @Author:    admin 
  * @Date:      2022-06-08 21:50:41 
    
   
  * @Copyright  jiaoyuyun.org.cn 
-->
<template>
  <a-modal :open="visible" :title="form.spId ? '编辑' : '添加'" ok-text="确认" cancel-text="取消" @ok="onSubmit" @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <!-- <a-form-item label="商品编号" name="spId">
        <a-input v-model:value="form.spId" placeholder="请输入商品编号" />
      </a-form-item> -->
      <a-form-item label="商家名称" name="shopName">
        <a-input v-model:value="form.shopName" placeholder="请输入商家名称" />
      </a-form-item>
      <a-form-item label="经营类型" name="shopRange">
          <!-- <a-select
            v-model:value="form.shopRange"
            mode="multiple"
            style="width: 100%"
            placeholder="Please select"
            :options="values"
            @change="handleChange"
          ></a-select> -->
        <a-select mode="multiple" v-model:value="form.shopRange" optionFilterProp="title" placeholder="请选择角色">
          <a-select-option v-for="item in typeList" :key="item.typeId" :title="item.typeName">{{ item.typeName }}</a-select-option>
        </a-select>
       </a-form-item>
      <a-form-item label="地址编号" name="placeId">
        <a-input v-model:value="form.placeId" placeholder="请输入地址编号" />
      </a-form-item>
       <a-form-item label="详细地址" name="xxplace">
        <textarea v-model="form.xxplace" style="width: 100%; height: 25px; outline: none"></textarea>
      </a-form-item>
      <a-form-item label="联系人" name="shopLxr">
        <a-input v-model:value="form.shopLxr" placeholder="请输入联系人姓名" />
      </a-form-item>
      <a-form-item label="联系电话" name="shopPhone">
        <a-input v-model:value="form.shopPhone" placeholder="请输入联系人姓名" />
      </a-form-item>

      <!-- <a-form-item label="商品图片" name="spPic">

      <a-upload
          v-model:file-list="file"
          action="http://localhost:1024/support/sp/upload"
          list-type="picture"
          class="upload-list-inline"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            图片上传
          </a-button>
        </a-upload>
      </a-form-item> -->
      <a-form-item label="商家图片" name="shopPic">
        <Upload
          accept=".jpg,.jpeg,.png,.gif"
          :maxUploadSize="1"
          buttonText="点击上传商家店面图片"
          :default-file-list="form.shopPic"
          @change="enterpriseLogoChange"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
  import { message,Button } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { reactive, ref } from 'vue';
  import { shopApi } from '/@/api/support/shop-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  //   const handleChange = value => {
  //     if(value.length>1){
  //     let str =value.join(",");
  //     form.shopRange=str
  //     }else{
  //     let str =value[0];
  //     form.shopRange=str
  //     }
  //     console.log(`selected ${value}`);
  //   };
  //   const values = [{
  //    id:0,
  //    value:"打印复印"
  //  },{
  //    id:1,
  //    value:"日用百货"
  //  },{
  //    id:2,
  //    value:"餐饮副食"
  //  },
  //  {
  //    id:3,
  //    value:"学习相关"
  //  },]

  // emit
  const emit = defineEmits(['reloadList']);

  //  组件
  const formRef = ref();
  const file =ref([]);
  const formDefault = {
    shopId: undefined,
    shopName: '',
    placeId: '',
    shopRange: undefined,
    xxplace: '',
    shopLxr: '',
    shopPhone: '',
    shopPic: undefined,
  };
  let form = reactive({ ...formDefault });
  const rules = {
    shopName: [{ required: true, message: '请输入商家名称' }],
    placeId: [{ required: false, message: '请输入地址编号' }],
    shopRange: [{ required: true, message: '请输入经营范围' }],
    shopLxr: [{ required: false, message: '请输入联系人姓名' }],
    shopPhone: [{ required: false, message: '请输入联系人手机号' }],
  };
  // 是否展示
  const visible = ref(false);

  function showModal(rowData) {
    Object.assign(form, formDefault);
    if (rowData) {
      Object.assign(form, rowData);
    }
    visible.value = true;
    queryAll(rowData);
  }

  function onClose() {
    Object.assign(form, formDefault);
    visible.value = false;
  }
  const typeList = ref([]); //经营范围列表
  async function queryAll() {
    let res = await shopApi.queryType();
    typeList.value = res.data;
  }
  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
     
          if (form.shopId) {
            await shopApi.updateShop(form);
          } else {
            await shopApi.addShop(form);
          }
          message.success(`${form.shopId ? '修改' : '添加'}成功`);
          emit('reloadList');
          onClose();
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }


 function enterpriseLogoChange(fileList) {
   console.info('shopPic'+JSON.stringify(fileList))
    form.shopPic = fileList;
  }

  defineExpose({
    showModal,
  });
</script>
